React useActionState: Celovit vodnik za sodobno upravljanje obrazcev

Ta pristop deluje, vendar ima več pomanjkljivosti:

• Ponavljajoča se koda: Potrebujemo tri ločene klice useState za upravljanje tega, kar je konceptualno en sam postopek oddaje obrazca.
• Ročno upravljanje stanja: Razvijalec je odgovoren za ročno nastavitev in ponastavitev stanj nalaganja in napak v pravilnem vrstnem redu znotraj bloka try...catch...finally. To se ponavlja in je nagnjeno k napakam.
• Povezovanje: Logika za obravnavo rezultata oddaje obrazca je tesno povezana z logiko izrisa komponente.

Predstavljamo useActionState: Premik paradigme

useActionState je React hook, zasnovan posebej za upravljanje stanja asinhronih dejanj, kot je oddaja obrazca. Poenostavi celoten postopek s povezovanjem stanja neposredno z izidom funkcije dejanja.

Njegova signatura je jasna in jedrnata:

const [state, formAction] = useActionState(actionFn, initialState);

Razčlenimo njegove komponente:

• actionFn(previousState, formData): To je vaša asinhrona funkcija, ki izvaja delo (npr. kliče API). Kot argumente prejme prejšnje stanje in podatke obrazca. Ključno je, da karkoli ta funkcija vrne, postane novo stanje.
• initialState: To je vrednost stanja, preden je bilo dejanje prvič izvedeno.
• state: To je trenutno stanje. Sprva ima initialState in se po vsaki izvedbi posodobi na vrnjeno vrednost vaše actionFn.
• formAction: To je nova, zavita različica vaše funkcije dejanja. To funkcijo morate posredovati lastnosti action elementa <form>. React uporablja to zavito funkcijo za sledenje stanju čakanja dejanja.

Praktični primer: Refaktoriranje z useActionState

Zdaj pa refaktorirajmo naš obrazec za izdelek z uporabo useActionState. Izboljšava je takoj opazna.

Najprej moramo prilagoditi našo logiko dejanja. Namesto da bi metali napake, bi moralo dejanje vrniti objekt stanja, ki opisuje izid.

Primer: 'Novi način' z useActionState

// Funkcija dejanja, zasnovana za delo z useActionState
const addProductAction = async (previousState, formData) => {
const productName = formData.get('productName');
await new Promise(resolve => setTimeout(resolve, 1500)); // Simulacija zakasnitve omrežja

if (!productName || productName.length < 3) {
return { message: 'Ime izdelka mora biti dolgo vsaj 3 znake.', success: false };
}

console.log(`Izdelek "${productName}" je bil dodan.`);
// Ob uspehu vrnite sporočilo o uspehu in počistite obrazec.
return { message: `Uspešno dodano "${productName}"`, success: true };
};

// Refaktorirana komponenta
import { useActionState } from 'react';
// Opomba: V naslednjem razdelku bomo dodali useFormStatus za obravnavo stanja čakanja.

function NewProductForm() {
const initialState = { message: null, success: false };
const [state, formAction] = useActionState(addProductAction, initialState);

return (

Ampak počakajte, kaj pa stanje čakanja? Kako onemogočimo gumb, medtem ko se obrazec oddaja?

Obravnavanje stanj čakanja z useFormStatus

React ponuja spremljevalni hook, useFormStatus, zasnovan za rešitev te natančne težave. Zagotavlja informacije o stanju za zadnjo oddajo obrazca, vendar z bistvenim pravilom: mora biti poklican iz komponente, ki je izrisana znotraj <form>, katerega stanje želite slediti.

To spodbuja čisto ločitev skrbi. Ustvarite komponento posebej za elemente uporabniškega vmesnika, ki se morajo zavedati stanja oddaje obrazca, kot je gumb za oddajo.

Hook useFormStatus vrne objekt z več lastnostmi, od katerih je najpomembnejša `pending`.

const { pending, data, method, action } = useFormStatus();

• pending: Logična vrednost, ki je `true`, če se nadrejeni obrazec trenutno oddaja, in `false` sicer.
• data: Objekt `FormData`, ki vsebuje podatke, ki se oddajajo.
• method: Niz, ki označuje metodo HTTP (`'get'` ali `'post'`).
• action: Sklicevanje na funkcijo, posredovano lastnosti `action` obrazca.

Ustvarjanje gumba za oddajo, ki se zaveda stanja

Ustvarimo namensko komponento `SubmitButton` in jo integrirajmo v naš obrazec.

Primer: Komponenta SubmitButton

import { useFormStatus } from 'react-dom';
// Opomba: useFormStatus je uvožen iz 'react-dom', ne 'react'.

function SubmitButton() {
const { pending } = useFormStatus();

return (

{pending ? 'Dodajanje...' : 'Dodaj izdelek'}

);
}

Zdaj lahko posodobimo našo glavno komponento obrazca, da jo uporabi.

Primer: Celoten obrazec z useActionState in useFormStatus

import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

// ... (funkcija addProductAction ostane enaka)

function SubmitButton() { /* ... kot je definirano zgoraj ... */ }

function CompleteProductForm() {
const initialState = { message: null, success: false };
const [state, formAction] = useActionState(addProductAction, initialState);

return (

S to strukturo komponenti `CompleteProductForm` ni treba vedeti ničesar o stanju čakanja. `SubmitButton` je popolnoma samozadosten. Ta kompozicijski vzorec je neverjetno močan za gradnjo kompleksnih, vzdržljivih uporabniških vmesnikov.

Moč progresivne izboljšave

Ena najpomembnejših prednosti tega novega pristopa, ki temelji na dejanjih, zlasti če se uporablja s strežniškimi dejanji, je samodejna progresivna izboljšava. To je ključni koncept za gradnjo aplikacij za globalno občinstvo, kjer so omrežne razmere lahko nezanesljive in imajo uporabniki morda starejše naprave ali onemogočen JavaScript.

Evo, kako deluje:

1. Brez JavaScripta: Če brskalnik uporabnika ne izvede JavaScripta na strani odjemalca, <form action={...}> deluje kot standardni obrazec HTML. Ustvari zahtevo za celotno stran na strežniku. Če uporabljate ogrodje, kot je Next.js, se izvede dejanje na strani strežnika in ogrodje ponovno izriše celotno stran z novim stanjem (npr. prikaz validacijske napake). Aplikacija je popolnoma funkcionalna, le brez gladkosti, podobne SPA.
2. Z JavaScriptom: Ko se JavaScript paket naloži in React hidrira stran, se isto `formAction` izvede na strani odjemalca. Namesto ponovnega nalaganja celotne strani se obnaša kot tipična zahteva za pridobivanje. Dejanje se pokliče, stanje se posodobi in ponovno se izrišejo samo potrebni deli komponente.

To pomeni, da enkrat napišete logiko obrazca in deluje brezhibno v obeh scenarijih. Privzeto gradite odporno, dostopno aplikacijo, kar je velika zmaga za uporabniško izkušnjo po vsem svetu.

Napredni vzorci in primeri uporabe

1. Strežniška dejanja proti odjemalskim dejanjem

Funkcija `actionFn`, ki jo posredujete useActionState, je lahko standardna asinhrona funkcija na strani odjemalca (kot v naših primerih) ali strežniško dejanje. Strežniško dejanje je funkcija, definirana na strežniku, ki jo je mogoče poklicati neposredno iz komponent odjemalca. V ogrodjih, kot je Next.js, jo definirate tako, da na vrhu telesa funkcije dodate direktivo "use server";.

• Odjemalska dejanja: Idealna za mutacije, ki vplivajo samo na stanje na strani odjemalca ali kličejo API-je tretjih oseb neposredno iz odjemalca.
• Strežniška dejanja: Popolna za mutacije, ki vključujejo bazo podatkov ali druge vire na strani strežnika. Poenostavijo vašo arhitekturo z odpravo potrebe po ročnem ustvarjanju končnih točk API za vsako mutacijo.

Lepota je v tem, da useActionState deluje enako z obema. Odjemalsko dejanje lahko zamenjate s strežniškim, ne da bi spremenili kodo komponente.

2. Optimistične posodobitve z `useOptimistic`

Za še bolj odziven občutek lahko kombinirate useActionState s hookom useOptimistic. Optimistična posodobitev je, ko takoj posodobite uporabniški vmesnik, *ob predpostavki*, da bo asinhrono dejanje uspelo. Če ne uspe, vrnete uporabniški vmesnik v prejšnje stanje.

Predstavljajte si aplikacijo za družabne medije, kjer dodate komentar. Optimistično bi takoj prikazali nov komentar na seznamu, medtem ko se zahteva pošilja na strežnik. useOptimistic je zasnovan za delo z dejanji, da bi ta vzorec implementirali preprosto.

3. Ponastavitev obrazca ob uspehu

Pogosta zahteva je, da počistite vnose obrazca po uspešni oddaji. Obstaja več načinov za dosego tega z useActionState.

• Trik z lastnostjo Key: Kot je prikazano v našem primeru `CompleteProductForm`, lahko vhodu ali celotnemu obrazcu dodelite edinstven `key`. Ko se ključ spremeni, bo React odmontiral staro komponento in namestil novo, s čimer bo učinkovito ponastavil njeno stanje. Povezava ključa z zastavico uspeha (`key={state.success ? 'success' : 'initial'}`) je preprosta in učinkovita metoda.
• Nadzorovane komponente: Po potrebi lahko še vedno uporabljate nadzorovane komponente. Z upravljanjem vrednosti vnosa z useState lahko pokličete funkcijo nastavitve, da jo počistite znotraj useEffect, ki posluša stanje uspeha iz useActionState.

Pogoste pasti in najboljše prakse

• Umestitev useFormStatus: Ne pozabite, komponenta, ki kliče useFormStatus, mora biti izrisana kot otrok <form>. Ne bo deloval, če je brat ali starš.
• Serializirano stanje: Pri uporabi strežniških dejanj mora biti objekt stanja, vrnjen iz vašega dejanja, serializiran. To pomeni, da ne more vsebovati funkcij, simbolov ali drugih neserializiranih vrednosti. Držite se navadnih objektov, nizov, nizov, števil in logičnih vrednosti.
• Ne mečite napak v dejanjih: Namesto `throw new Error()`, mora vaša funkcija dejanja obravnavati napake milostno in vrniti objekt stanja, ki opisuje napako (npr. `{ success: false, message: 'Prišlo je do napake' }`). To zagotavlja, da se stanje vedno posodobi predvidljivo.
• Določite jasno obliko stanja: Že od začetka vzpostavite dosledno strukturo za svoj objekt stanja. Oblika, kot je `{ data: T | null, message: string | null, success: boolean, errors: Record | null }`, lahko zajame številne primere uporabe.

useActionState proti useReducer: Hitra primerjava

Na prvi pogled se lahko zdi useActionState podoben useReducer, saj oba vključujeta posodabljanje stanja na podlagi prejšnjega stanja. Vendar pa služita različnim namenom.

• useReducer je hook splošnega namena za upravljanje kompleksnih prehodov stanja na odjemalski strani. Sproži se s pošiljanjem dejanj in je idealen za logiko stanja, ki ima veliko možnih, sinhronih sprememb stanja (npr. zapleten čarovnik z več koraki).
• useActionState je specializiran hook, zasnovan za stanje, ki se spreminja kot odgovor na eno samo, običajno asinhrono dejanje. Njegova primarna vloga je integracija z obrazci HTML, strežniškimi dejanji in Reactovimi funkcijami hkratnega izrisa, kot so prehodi stanja čakanja.

Glavna misel: Za oddajo obrazcev in asinhrone operacije, povezane z obrazci, je useActionState sodobno, namensko orodje. Za druge kompleksne avtomate stanja na strani odjemalca ostaja useReducer odlična izbira.

Sklep: Sprejemanje prihodnosti Reactovih obrazcev

Hook useActionState je več kot le nov API; predstavlja temeljni premik k bolj robustnemu, deklarativnemu in uporabniško usmerjenemu načinu obravnavanja obrazcev in podatkovnih mutacij v Reactu. Z njegovo uporabo pridobite:

• Zmanjšana ponavljajoča se koda: En sam hook nadomešča več klicev useState in ročno orkestracijo stanja.
• Integrirana stanja čakanja: Brezhibno obravnavajte uporabniške vmesnike nalaganja s spremljevalnim hookom useFormStatus.
• Vgrajena progresivna izboljšava: Pišite kodo, ki deluje z ali brez JavaScripta, kar zagotavlja dostopnost in odpornost za vse uporabnike.
• Poenostavljena strežniška komunikacija: Naravna primernost za strežniška dejanja, ki poenostavlja izkušnjo razvoja celotnega sklada.

Ko začenjate nove projekte ali refaktorirate obstoječe, razmislite o uporabi useActionState. Ne samo, da bo izboljšal vašo izkušnjo razvijalca, saj bo vaša koda čistejša in bolj predvidljiva, temveč vas bo tudi opolnomočil za gradnjo kakovostnejših aplikacij, ki so hitrejše, bolj odporne in dostopne raznolikemu globalnemu občinstvu.